<template>
  <el-tag v-for="(item, index) in arr"
    :disable-transitions="true"
    :key="item.key"
    :index="index"
    :type="item.elTagType"
    :class="item.elTagClass"
    :style="item.elTagStyle"
    hit
    style="margin: 0 2px;"
    effect="plain">{{ item.key }} - {{ item.value }}
  </el-tag>
</template>

<script setup>
import {computed} from "vue";
import {isNullOrUndefined} from "@/config/common";

const props = defineProps({
  dictList: {
    type: Array,
    required: true,
    default: null,
  },
  dictKey: {
    type: [String, Array, Number],
    default: null,
  },
})

const arr = computed(() => {
  if (isNullOrUndefined(props.dictKey)) {
    return []
  }
  const keys = props.dictKey.toString()
  const dictKeyArr = keys.split(',')
  return props.dictList.filter(item => dictKeyArr.includes(item.key.toString())).map(item => {
    item.elTagType = isNullOrUndefined(item.elTagType) ? 'info' : (item.elTagType === 'primary' ? '' : item.elTagType);
    return item;
  })
})
</script>
